<template>
  <el-pagination
    :current-page="ordersForm.pagenum"
    :page-size="ordersForm.pagesize"
    :page-sizes="[5, 10, 20, 40]"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
  </el-pagination>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'

const {
  mapState
} = createNamespacedHelpers('orders')

export default {
  name: 'OrdersPagination',
  methods: {
    handleSizeChange (value) {
      this.ordersForm.pagesize = value
      this.$emit('searchOrders')
    },
    handleCurrentChange (value) {
      // 发起请求前, 无论之前的请求在什么阶段 都将其终止
      // console.log(this.$httpRequestList)
      if (this.$httpRequestList.length > 0) {
        this.$httpRequestList.forEach(item => {
          item()
          this.$httpRequestList.shift()
        })
      }
      this.ordersForm.pagenum = value
      this.$emit('searchOrders')
    }
  },
  props: ['ordersForm'],
  computed: {
    ...mapState(['total'])
  }
}
</script>

<style scoped>

</style>
